import React, { Component } from 'react';

import {
 StyleSheet,
  View,
  Text,
  Button,
  Alert,
  Image,
  ActivityIndicator,
  ScrollView,
  Dimensions,
  ToastAndroid
}from 'react-native'


import parseDate from '../commons/parseDate'

const { width, height } = Dimensions.get('window');

const styles=StyleSheet.create({
    topshow:{
        width:width,
        paddingTop:20,
        flexDirection:'column',
        backgroundColor:'white',
        justifyContent:'space-around',
        alignItems:"center"
    },
    loading: {
    marginTop: 100,
  },
    toptext:{
        fontSize:20,
        marginTop:3,
        width:'40%',
        textAlign:'center',
        color:'black'
    },
    showlist:{
        flexDirection:'row',
        backgroundColor:'white',
        justifyContent:'space-between',
        alignItems:'center',
        flexWrap:'wrap'
    },
    floatleft:{
        width:'50%',
        textAlign:'left',
        padding:6,
        paddingLeft:14
    },
    floatright:{
        color:'black',
        width:'50%',
        textAlign:'right',
        padding:6,
        paddingRight:14
    },
    toptext2:{
        fontSize:30,
        marginTop:3,
        width:'40%',
        textAlign:'center',
        color:'black'
    },
    topimg:{
        width:40
    },
    foodlist:{
        flexDirection:'row',
        marginTop:10,
        backgroundColor:'white',
        justifyContent:'space-between',
        alignItems:'center',
        flexWrap:'wrap'
    },
    food:{
        width:'25%',
        color:'black',
        paddingTop:10,
        paddingBottom:10,
        textAlign:'center'
    },
    btn:{
        height:20,
        paddingTop:13
    }
})

export default class Orderin extends Component{
    static navigationOptions={
        title:'订单详情',
        headerTitleStyle: {
        alignSelf:'center'
      },
    };

    state={
        info:'',
        ready:false
    }

    gettype=function(data){
        var time=new Date().getTime()-parseDate(data.updateDate).getTime()
        if(data.paymentStatus==2&&time<18000000){
            return(
                <View style={{flexDirection:'column',justifyContent:'space-around',marginTop:10}}>
                <Button 
            onPress={()=>{
                                    Alert.alert(
                                        '确定退单？',
                                        null,
                                        [
                                        {text: '取消', onPress: () => {}},
                                        {text: '确定', onPress: () => this.backorder()},
                                        {text: '', onPress: () =>{} },
                                        ]
                                    )
                                    
                                }}
             style={styles.btn} title="退单"/>

            <Text style={{height:10,width:'100%'}}></Text>

            <Button style={styles.btn} title="退菜" onPress={()=>{this.props.navigation.navigate('TuiCai')}}/>

            <Text style={{height:10,width:'100%'}}></Text>
            </View>
            )
        } 
        else if(data.paymentStatus==6&&(time<86400000)){
            return(
                <View style={{flexDirection:'column',justifyContent:'space-around',marginTop:10}}>
            <Button 
            onPress={()=>{this.backorder()}}
             style={styles.btn} title="退单"/>

            <Text style={{height:10,width:'100%'}}></Text>

            <Button style={styles.btn} title="退菜" onPress={()=>{this.props.navigation.navigate('TuiCai')}}/>

            <Text style={{height:10,width:'100%'}}></Text>

            <Button 
            onPress={()=>{
                                    Alert.alert(
                                        '确定完成支付？',
                                        null,
                                        [
                                        {text: '取消', onPress: () => {}},
                                        {text: '确定', onPress: () => this.paid()},
                                        {text: '', onPress: () =>{} },
                                        ]
                                    )
                                    
                                }}
            style={styles.btn} title="完成支付"/>

            <Text style={{height:10,width:'100%'}}></Text>
            </View>
            )
        }

    }


    backorder=async function(){
        let response = await fetch(global.mainurl+"bossHelper/backOrder?mainOrderId="+this.props.navigation.state.params.id+"&userid="+global.userdata.id+"&token="+global.token+'&payStatus=3');
        let result=await response.json()
        if(result.code==1){
            ToastAndroid.show('退单成功', ToastAndroid.SHORT);
            this.props.navigation.state.params.reload()
            this.props.navigation.goBack()
        }
    }

    paid=async function(){
        let response = await fetch(global.mainurl+"bossHelper/orderPay?id="+this.props.navigation.state.params.id+"&userid="+global.userdata.id+"&token="+global.token);
        let result=await response.json()
        if(result.code==1){
            ToastAndroid.show('支付成功', ToastAndroid.SHORT);
            this.props.navigation.state.params.reload()
            this.props.navigation.goBack()
        }
    }

    async componentWillMount(){
        let response = await fetch(global.mainurl+"bossHelper/getOrderDataDetail?mainOrderId="+this.props.navigation.state.params.id+"&userid="+global.userdata.id+"&token="+global.token);
        let result=await response.json()
        console.log(result)
        this.setState({
            info:result.data,
            ready:true
        })
      }

    initimg=function(data){
  switch(data.paymentStatus){
          case '5' : return (<Image
                    source={require('../img/status5.png')}
                    resizeMode='contain'
                    style={styles.topimg}
                  /> );break;
          case '4' : return (<Image
                    source={require('../img/status4.png')}
                    resizeMode='contain'
                    style={styles.topimg}
                  /> );break;
          case '3' : return (<Image
                    source={require('../img/status3.png')}
                    resizeMode='contain'
                    style={styles.topimg}
                  /> );break;
          case '2' : return (<Image
                    source={require('../img/status2.png')}
                    resizeMode='contain'
                    style={styles.topimg}
                  /> );break;
          case '1' : return (<Image
                    source={require('../img/status1.png')}
                    resizeMode='contain'
                    style={styles.topimg}
                  /> );break;
          case '6' : return (<Image
                    source={require('../img/status6.png')}
                    resizeMode='contain'
                    style={styles.topimg}
                  /> );break;
          default:return;
          }
}

    render(){
        const info=this.state.info
        const ready=this.state.ready
        const list=[]
        if(info){
        info.orderFormList.forEach(function(data,index){
            list.push(
                <View style={styles.showlist} key={index}>
                <Text style={styles.floatleft}>{data.commodityName}{data.specsname}X{data.quality}</Text>
                <Text style={styles.floatright}>{data.totalPrice}</Text>
                </View>
            )
        })
        }
        return(
            <ScrollView>
            { ready?
            <View>
            <View style={styles.topshow}>
            <Text style={styles.toptext}>{info.sellerName}</Text>
            <Text style={styles.toptext2}>+{info.paidPrice}</Text>
            {this.initimg(info)}
            </View>
            <View style={styles.showlist}>

            <Text style={styles.floatleft}>下单时间:</Text>
            <Text style={styles.floatright}>{info.createDate}</Text>
            <Text style={styles.floatleft}>桌号:</Text>
            <Text style={styles.floatright}>{info.tablename}</Text>
            <Text style={styles.floatleft}>流水号:</Text>
            <Text style={styles.floatright}>{info.swiftnumber}</Text>
            <Text style={styles.floatleft}>操作人:</Text>
            <Text style={styles.floatright}>{info.nickName}</Text>
            <Text style={styles.floatleft}>订单号:</Text>
            <Text style={styles.floatright}>{info.id}</Text>
            <Text style={{height:1,backgroundColor:'rgba(150,150,150,0.5)',width:'100%'}}></Text>
            <Text style={styles.floatleft}>菜品</Text>
            <Text style={styles.floatright}>菜品价格</Text>
            {list}
            <Text style={{height:1,backgroundColor:'rgba(150,150,150,0.5)',width:'100%'}}></Text>
            <Text style={styles.floatleft}>其他费用:</Text>
            <Text style={styles.floatright}>{info.tableprice}</Text>
            <Text style={styles.floatleft}>总金额:</Text>
            <Text style={styles.floatright}>{info.totalPrice}</Text>
            <Text style={styles.floatleft}>优惠金额:</Text>
            <Text style={styles.floatright}>{(info.totalPrice-info.paidPrice).toFixed(2)}</Text>
            <Text style={styles.floatleft}>实付金额:</Text>
            <Text style={styles.floatright}>{info.paidPrice}</Text>

            </View>
            {this.gettype(info) }
            </View>
            :
            <ActivityIndicator size="large" style={styles.loading} />
            }
            </ScrollView>
             
        )
    }
}